<template>
	<view class="body" >
		<view class="header" >
			<view class="head-search" >
				<u-search v-model="searchKws" :show-action="false" placeholder="我的订单" ></u-search>
			</view>
			
			<view class="tabs" >
				<u-tabs-swiper ref="uTabs" :list="list" :is-scroll="false" :current="current" inactive-color="#ccc" active-color="#fa436a" @change="change"></u-tabs-swiper>
			</view>
			
		</view>
		
		<!-- 用来占位的开始 -->
		<view class="place" ></view>
		<!-- 用来占位的结束 -->
		
		<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
					
					<u-empty v-if="item.data.length == 0" mode="order"></u-empty>
					
					<view class="item" v-for="(value,index) in item.data" >
						
						<view class="item-store" >
							<view>SWA旗舰店</view>
							<view class="item-status" >待付款</view>
						</view>
						<view class="item-content" >
							
							<view class="item-img" >
								<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode="aspectFill" ></image>
							</view>
							<view class="center" >
								<view class="center-tit" >MCM Patricia Visetos</view>
								<view class="center-subtitle" >系列女士单肩斜挎可拆卸包</view>
								<view class="center-attribute" >90ml</view>
							</view>
							<view class="right" >
								<view class="right-money" >¥<text>50.0</text></view>
								<view class="right-num" >x<text>2</text></view>
							</view>
						</view>
						<view class="pay-view" ><text class="pay-tit" >实付款</text>¥100</view>
						
						<view class="item-button" >
							<view class="btn cancle-btn" @click="cancleOrder" >取消订单</view>
							<view class="btn pay-btn " @click="payAction" >立即支付</view>
							<view class="btn pay-btn " @click="confirm" >确认收货</view>
							<view class="btn pay-btn " @click="deleteOrder" >删除订单</view>
						</view>
						
					</view>
					
					<u-loadmore :status="status" />
					
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				searchKws: ''   ,//搜索的关键词
				list: [  //0为全部的返回，1未支付，2待发货，3已发货，4已完成
					
					{
						name: '全部',
						value: 0
					}, {
						name: '待付款',
						value: 1
					}, {
						name: '已支付',
						value: 0
					}, {
						name: '已完成',
						value: 4
					}
				],
				tabList: [
					{
						page: 1,
						status: 'loadmore',
						data: [],
						
					},
					{
						page: 1,
						status: 'loadmore',
						data: [],
					},
					{
						page: 1,
						status: 'loadmore',
						data: [],
					},
					{
						page: 1,
						status: 'loadmore',
						data: [],
					}
				],
				current: 0  ,//当前tab
				swiperCurrent: 0  //当前Index
			}
		},
		methods:{
			change(e){
				this.current = e
				this.swiperCurrent = e
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				
			},
			payAction(){  //立即支付
				uni.navigateTo({
					url: './settlement'
				})
			},
			confirm(){  //确认收货
				uni.showModal({
					title: '提示',
					content: '是否确认收货',
					success(req) {
						if(req.confirm){
							uni.showToast({
								title: '成功',
								icon: 'none'
							})
						}
					}
				})
			},
			deleteOrder(){  //删除订单
				uni.showModal({
					title: '提示',
					content: '是否确认删除订单',
					success(req) {
						if(req.confirm){
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							})
						}
					}
				})
			},
			cancleOrder(){  //取消订单
				uni.showModal({
					title: '提示',
					content: '是否确认取消订单',
					confirmText: '确认',	
					success(req) {
						if(req.confirm){
							uni.showToast({
								title: '取消成功',
								icon: 'none'
							})
						}
					}
				})
			}
		}
	}
	
</script>

<style lang="scss" >
	
	page,.body{
		width: 100%;
		height: 100%;
		
		background-color: rgb(250,250,250);
	}
	
	.header{
		position: fixed;
		top: 0;
		width: 100%;
		
		z-index: 1;
		
		padding: 20rpx;
		
		height: 170rpx;
		
		background-color: #FFFFFF;
		
		.tabs{
			margin-bottom: 10rpx;
		}
		
		.head-search{
			height: 80rpx;
		}
	}
	
	.place{
		height: 180rpx;
	}
	
	.swiper{
		
		height: calc(100vh - 200rpx);
		
		font-size: $uni-font-size-base;
		
		.item{
			margin-top: 20rpx;
			background-color: #FFFFFF;
		}
		.item-store{
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			padding: 20rpx;
			
			background-color: #FFFFFF;
			border-bottom: 1rpx solid rgb(235,235,235);
			
			.item-status{
				color: $uni-color-error;
			}
		}
		
		.item-content{
			display: flex;
			flex-direction: row;
			
			background-color: #FFFFFF;
			
			padding: 20rpx;
			
			.item-img{
				
				width: 100rpx;
				height: 100rpx;
				
				border-radius: 8rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			
			.center{
				flex: 1;
				margin-left: 16rpx;
				
				font-size: $uni-font-size-base;
				
				.center-subtitle{
					padding: 6rpx 0;
					color: #666;
					font-size: 24rpx;
				}
				
				.center-attribute{
					
					color: #CCCCCC;
					font-size: 24rpx;
				}
			}
			
			.right{
				text-align: right;
				
				.right-num{
					padding: 6rpx 0;
					color: #ccc;
				}
			}
		}
		
		.pay-view{
			
			padding: 20rpx;
			text-align: right;
			
			border-bottom: 1rpx solid rgb(235,235,235);
			
			.pay-tit{
				padding-right: 16rpx;
				color: #CCCCCC;
				font-size: $uni-font-size-sm;
			}
		}
		
		.item-button{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			
			padding: 16rpx 20rpx ;
			font-size: $uni-font-size-sm;
			
			.btn{
				padding: 0 26rpx;
				
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 40rpx;
				
				&.cancle-btn{
					margin-right: 20rpx;
					border: 1rpx solid #ccc;
				}
				&.pay-btn{
					margin-right: 20rpx;
					
					color: $uni-color-error;
					background-color: rgb(253,244,244);
					border: 1rpx solid $uni-color-error;
				}
			}
		}
	}
	
</style>
